<!--  -->
<template>
    <div>
        Teleport作用：将html代码移动到指定的位置
        <div class="menu">
            <ul>
                <li @click="show(item.id)" :id="'limenu' + item.id" v-for="item in menus">{{ item.title }}
                </li>
            </ul>
        </div>
        <Teleport v-if="ishow" :to="limenu">
            <div class="menuTip">
                菜单提示
            </div>
        </Teleport>
        <div class="box">
            <Teleport to="body">
                <div class="dialog">
                    这是一个弹框
                    <button>关闭</button>
                </div>
            </Teleport>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { reactive, toRefs, ref, onMounted, Teleport } from 'vue'

const menus = ref([{ id: 1, title: "菜单1" }, { id: 2, title: "菜单2" }, { id: 3, title: "菜单3" }])

const ishow = ref(false);
const limenu = ref("");

const show = (id: number) => {
    console.log(id);
    ishow.value = true;
    limenu.value = "#limenu" + id;

}

</script>
<style scoped lang="less">
.box {
    width: 300px;
    height: 300px;
    background: skyblue;
    position: relative;

}

.dialog {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 200px;
    height: 200px;
    margin-left: -100px;
    margin-top: -100px;
    background: yellow;


}

.menu {
    ul {
        display: flex;
        width: 500px;
        height: 60px;
        background: #ddd;
        align-items: center;
        justify-content: center;

        li {
            flex: 1;
            list-style: none;
            display: flex;
            justify-content: center;
            position: relative;
        }
    }
}

.menuTip {
    width: 100px;
    height: 30px;
    background: sandybrown;
    position: absolute;
    top: 30px;
    left: 20px;
    z-index: 999;

}
</style>